<template>
  <div class="container">
    <el-card>
      <!-- 添加题库 -->
      <el-row style="margin-bottom: 20px">
        <el-col :span="8">
          <el-alert
            :closable="false"
            title="说明：目前支持学科和关键字条件筛选"
            type="error"
          >
          </el-alert>
        </el-col>
        <el-col :span="16">
          <el-row type="flex" justify="end">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="$router.push('new')"
              >添加试题</el-button
            >
          </el-row>
        </el-col>
      </el-row>

      <el-form
        ref="questionsFormRef"
        :model="questionsForm"
        label-width="100px"
        :rules="questionsFormRules"
      >
        <!-- 第一层第一层第一层第一层第一层第一层第一层第一层第一层第一层第一层 -->

        <el-col :span="6">
          <el-form-item label="学科：" prop="subjectID">
            <el-select
              v-model="questionsForm.subjectID"
              placeholder="请选择"
              @change="changeSubjectId"
              clearable
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in subjectLists"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录：" prop="twoLevelSubjectID">
            <el-select
              v-model="questionsForm.twoLevelSubjectID"
              placeholder="请选择"
              @change="changeTwoLevelSubjectID"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in twoLevelSubjectList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签：" prop="tagsID">
            <el-select v-model="questionsForm.tagsID" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in tagsList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input
              placeholder="根据题干搜索"
              v-model="questionsForm.keyword"
            ></el-input>
          </el-form-item>
        </el-col>

        <!-- 第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层 -->
        <!-- 第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层 -->
        <!-- 第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层 -->
        <!-- 第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层第二层 -->

        <el-col :span="6">
          <el-form-item label="试题类型：" prop="questionType">
            <el-select
              v-model="questionsForm.questionType"
              placeholder="请选择"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in questionType"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度：" prop="difficulty">
            <el-select v-model="questionsForm.difficulty" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in difficulty"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向：" prop="direction">
            <el-select v-model="questionsForm.direction" placeholder="请选择">
              <el-option
                :label="item"
                :value="index"
                v-for="(item, index) in direction"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creator">
            <el-select v-model="questionsForm.creator" placeholder="请选择">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option
                label="录入管理员"
                value="录入管理员"
              ></el-option> </el-select
          ></el-form-item>
        </el-col>

        <!-- 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 -->
        <!-- 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 -->
        <!-- 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 -->
        <!-- 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 -->
        <!-- 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 第三层 -->

        <el-col :span="6">
          <el-form-item label="题目备注：" prop="matching">
            <el-input v-model="questionsForm.matching"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称：" prop="enterprise">
            <el-input v-model="questionsForm.enterprise"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市：" prop="city">
            <el-row type="flex" justify="end">
              <el-select
                v-model="questionsForm.city"
                placeholder="请选择"
                style="margin-right: 10px"
                @change="bigCityChange"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in allCitys"
                  :key="index"
                ></el-option>
              </el-select>
              <el-select v-model="questionsForm.citys" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in citys"
                  :key="index"
                ></el-option>
              </el-select>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button @click="clearQuestionsForm">清除</el-button>
              <!-- $refs.questionsFormRef.resetFields() -->
              <el-button type="primary" @click="searchQuestion">查询</el-button>
            </el-row></el-form-item
          >
        </el-col>
      </el-form>
      <!-- 警示栏 -->
      <el-alert type="info" show-icon>数据一共{{ counts }}条 </el-alert>
      <!-- 表格表格表格表格表格表格表格表格表格表格表格 -->
      <el-table :data="textBaseList" stripe style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="100">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else-if="scope.row.questionType == 2">多选</span>
            <span v-else>简达</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="320">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="320">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="100">
          <template slot-scope="scope"
            ><span v-if="scope.row.difficulty == 1">简单</span
            ><span v-else-if="scope.row.difficulty == 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100">
        </el-table-column>
        <el-table-column label="操作" width="320px">
          <template slot-scope="scope">
            <!-- 预览 -->
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              @click="showSeeDialog(scope.row)"
            >
            </el-button>
            <!-- 编辑 -->
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              @click="editShowButton(scope.row.id)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteQuestions(scope.row)"
            ></el-button>
            <!-- 归为精选题库 -->
            <el-button
              type="warning"
              icon="el-icon-check"
              circle
              @click="AddQuestionChoice(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="queryInfo.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <!-- 查看弹出层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="seeDialogVisible"
      width="50%"
      center
      class="seeDialog"
    >
      <el-row>
        <el-col :span="6"
          >【题型】：{{
            seeList.questionType == 1 ? "单选题" : "多选题"
          }}</el-col
        >
        <el-col :span="6">【编号】：{{ seeList.id }}</el-col>
        <el-col :span="6"
          >【题型】：{{ seeList.difficulty == 1 ? "简单" : "苦难" }}</el-col
        >
        <el-col :span="6">【标签】：{{ seeList.tags }}</el-col>
        <el-col :span="6">【学科】：{{ seeList.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ seeList.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ seeList.direction }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24"
          >【题干】：
          <div v-html="seeList.question" class="tigan"></div>
        </el-col>
        <el-col :span="24"
          >{{
            seeList.questionType == 1 ? "单选题" : "多选题"
          }}选项:(以下选中为正确的选项)</el-col
        >
        <el-col v-if="seeList.questionType == 1">
          <div v-for="item in seeList.options" :key="item.id">
            <el-radio :value="item.isRight" :label="1">
              {{ item.code }}{{ item.title }}</el-radio
            >
          </div>
        </el-col>
        <el-col v-else-if="seeList.questionType == 2">
          <div v-for="item in seeList.options" :key="item.id">
            <el-checkbox :value="item.isRight ? true : false" :label="1">
              {{ item.code }} {{ item.title }}</el-checkbox
            >
          </div>
        </el-col>
        <el-col v-else>
          <el-checkbox>简答</el-checkbox>
        </el-col>
      </el-row>

      <el-row>
        <el-col
          >【参考答案】：<el-button
            type="danger"
            @click="showVideoVisible = !showVideoVisible"
            >视频答案预览</el-button
          >
          <div>
            <video
              class="videostyle"
              v-show="showVideoVisible"
              :src="seeList.videoURL"
              controls
              preload="auto"
            ></video>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col
          >【答案解析】：
          <div style="display: inline-block" v-html="seeList.answer"></div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>【题目配注】：{{ seeList.remarks }} </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="seeDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove,
  detail as questionsDetail,
  choiceAdd,
} from "@/api/hmmm/questions";
import { list as subjectList, simple } from "@/api/hmmm/subjects";
import { simple as twoLevelSimple } from "@/api/hmmm/directorys";
import { detail, simple as tagsSimple } from "@/api/hmmm/tags";
//城市信息
import { provinces, citys } from "@/api/hmmm/citys";
// 难度 ，方向
import { difficulty, questionType, direction } from "@/api/hmmm/constants";
//时间过滤器
import { parseTimeByString } from "@/filters/index";
export default {
  name: "Questions",
  data() {
    return {
      questionsForm: {
        subjectID: null, //学科
        twoLevelSubjectID: null, //二级目录
        tagsID: null, //标签id
        keyword: null, //关键字
        questionType: null,
        difficulty: null, //难度
        direction: null, //方向
        creator: null, //录入人
        matching: null, //备注
        enterprise: null, //企业简称
        city: null, //城市
        citys: null,
      },
      questionsFormRules: {
        subjectID: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        twoLevelSubjectID: [],
        tagsID: [],
        keyword: [],
        questionType: [],
        difficulty: [],
        direction: [],
        creator: [],
        matching: [],
        enterprise: [],
        city: [],
      },
      //第二行信息
      questionType,
      difficulty,
      direction,

      // 所有城市
      allCitys: [],
      citys: [],

      textBaseList: [],
      //获取分页
      queryInfo: {
        pagesize: 5,
        page: 1,
      },
      // 题目总数
      counts: 0,
      //学科
      subjectLists: [],
      //二级学科目录
      twoLevelSubjectList: [],
      // 标签
      tagsList: {},
      // 查看
      seeDialogVisible: false,
      seeList: [],
      // 视频石佛显示
      showVideoVisible: false,
    };
  },
  methods: {
    handleChange() {},
    // 获取基础试题
    async getBaseList() {
      try {
        const { data } = await list(this.queryInfo);
        // console.log(data);
        this.textBaseList = data.items;
        this.counts = data.counts;
      } catch (error) {
        console.log(error);
      }
    },
    // 更改pagesize
    handleSizeChange(num) {
      this.queryInfo.pagesize = num;
      this.getBaseList();
    },
    handleCurrentChange(num) {
      this.queryInfo.page = num;
      this.getBaseList();
    },
    //获取学科列表
    async getSubjectList() {
      try {
        const { data } = await simple();
        this.subjectLists = data;
        // console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    //当学科目录发生改变
    changeSubjectId() {
      // console.log(this.questionsForm.subjectID);
      this.getTwoLevelSubject();
      // this.cateSubjectId();
    },
    //当学e二级科目录发生改变

    changeTwoLevelSubjectID() {
      this.getTagsList();
    },
    async getTwoLevelSubject() {
      try {
        const { data } = await twoLevelSimple({
          subjectID: this.questionsForm.subjectID,
        });
        // console.log(data);
        this.twoLevelSubjectList = data;
      } catch (error) {
        console.log(error);
      }
    },
    //标签
    async getTagsList() {
      try {
        const { data } = await tagsSimple({
          subjectID: this.questionsForm.subjectID,
        });
        // console.log(data);
        this.tagsList = data;
      } catch (error) {
        console.log(error);
      }
    },
    // 城市信息
    async getCitysList() {
      this.allCitys = await provinces();
      // console.log(data);
    },
    //获取二级城市信息
    async bigCityChange() {
      // console.log(this.questionsForm.city);
      this.citys = await citys(this.questionsForm.city);
    },

    //清空from
    async clearQuestionsForm() {
      const confirmResult = await this.$confirm(
        "此操作将清空表单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("已取消删除"); // console.log(this.$refs.questionsFormRef);
      // this.questionsForm = null;
      this.$refs.questionsFormRef.resetFields();
      this.twoLevelSubjectList = null;
      this.citys=null
      // console.log(111111);
      this.getBaseList();
    },
    //查询问题
    async searchQuestion() {
      //根据表题目路查找
      if (this.questionsForm.subjectID) {
        try {
          // console.log(this.questionsForm.subjectID);
          const { data } = await list({
            subjectID: this.questionsForm.subjectID,
          });
          console.log(data);
          this.textBaseList = data.items;
        } catch (error) {
          console.log(error);
        }
      }
      //更具关键字查找、
      if (this.questionsForm.keyword) {
        try {
          // console.log(this.questionsForm.subjectID);
          const { data } = await list({
            keyword: this.questionsForm.keyword,
          });
          console.log(data);
          this.textBaseList = data.items;
        } catch (error) {
          console.log(error);
        }
      }
    },

    // 查看tanchuc
    async showSeeDialog(row) {
      try {
        const { data } = await questionsDetail({ id: row.id });
        // console.log(data);
        this.seeList = data;
        this.seeDialogVisible = true;
      } catch (error) {
        console.log(error);
      }
    },
    // 删除题目
    async deleteQuestions(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("已取消删除");
      const { data } = await remove(row);
      this.$message.success("删除成功");
      this.getBaseList();
      // console.log(data);
    },
    //编辑题目
    editShowButton(id) {
      // console.log(id);
      this.$router.push(`new?id=${id}`);
    },
    //加入精选题目
    async AddQuestionChoice(row) {
      try {
        await choiceAdd({
          id: row.id,
          choiceState: 1,
        });
        this.getBaseList();
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {
    this.getBaseList();
    this.getSubjectList();
    this.getCitysList();
  },
  watch: {
    "questionsForm.city"() {
      //当城市没有清空，自动清空二级city
      if (!this.questionsForm.city) {
        this.questionsForm.citys = null;
      }
    },
  },
};
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
  .el-card {
    min-height: 100%;
    padding: 65px 25px 0 25px;
    // background-color: pink;
    .el-select {
      width: 100%;
    }
    .el-pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
  /deep/ .seeDialog {
    font-size: 30px;
    .el-row {
      border-bottom: 1px solid #ccc;
      margin: 20px 0px 20px 0;
      .tigan {
        color: #0101ff;
      }
    }
    .el-row:nth-child(1) {
      .el-col {
        margin-bottom: 20px;
      }
    }
    .el-row:nth-child(n + 4) {
      height: 60px;
      line-height: 60px;
    }
    .videostyle {
      width: 450px;
      height: 250px;
    }
  }
}
</style>